<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-row type="flex" justify="space-around">
        <el-col :span="18">
          <el-card>
            <el-row type="flex" justify="space-around">
              <el-col :span="13">
                <div class="gg-tj gongdan">
                  <div class="top"><span class="left">工单统计</span><span class="right">{{ dateStart }}~{{ end }}</span></div>
                  <div class="bottom">
                    <el-row type="flex" justify="space-around">
                      <el-col :span="6">
                        <div class="ds">
                          <div class="sum">{{ SumWork.total }}</div>
                          <div class="tit">工单总数(个)</div>
                        </div>
                      </el-col>
                      <el-col :span="6"> <div class="ds">
                        <div class="sum">{{ SumWork.completedTotal }}</div>
                        <div class="tit">完成工单(个)</div>
                      </div></el-col>
                      <el-col :span="6"> <div class="ds">
                        <div class="sum">{{ SumWork.progressTotal ?SumWork.progressTotal:0 }}</div>
                        <div class="tit">进行工单(个)</div>
                      </div></el-col>
                      <el-col :span="6"> <div class="ds">
                        <div class="sum">{{ SumWork.cancelTotal }}</div>
                        <div class="tit">取消工单(个)</div>
                      </div></el-col>
                    </el-row>
                  </div>
                </div>
              </el-col>
              <el-col :span="10">
                <div class="gg-tj xiaoshou">
                  <div class="top"><span class="left">销售统计</span><span class="right">{{ dateStart }}~{{ end }}</span></div>
                  <div class="bottom">
                    <el-row type="flex" justify="space-around">
                      <el-col :span="5">
                        <div class="ds">
                          <div class="gdsum sum">{{ sum }}</div>
                          <div class="gdtit tit">订单量(个)</div>
                        </div>
                      </el-col>
                      <el-col :span="5">
                        <div class="ds">
                          <div class="gdsum sum">{{ revenue }}</div>
                          <div class="gdtit tit">销售额(万元)</div>
                        </div></el-col>
                    </el-row>
                  </div>
                </div>
              </el-col>
            </el-row>

            <el-row class="xiaoshou-title" type="flex" justify="space-around">
              <el-col>
                <div>
                  <span class="left">销售数据</span><span class="right">{{ start }}~{{ end }}</span>
                </div>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <el-col>
                    <el-button size="mini" :class="{active:isActBtn===0}" @click="getWeekData">周</el-button>
                    <el-button size="mini" :class="{active:isActBtn===1}" @click="getMonData">月</el-button>
                    <el-button size="mini" :class="{active:isActBtn===2}" @click="getYearsData">年</el-button>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-card>
          <el-card>
            <!-- 图表 -->
            <el-row type="flex" justify="space-around">
              <el-col>
                <div id="qushi-xiaoshou" class="qushi biao-size" />
              </el-col>
              <el-col>
                <div id="fenbu-xiaoshou" class="fenbu biao-size" /></el-col>
            </el-row>

          </el-card>
          <!-- right 商品热榜 -->
        </el-col>
        <el-col class="bgd-le" :span="6">
          <el-card class="right-tj">
            <div class="title">商品热榜 <span class="time">{{ start }}~{{ end }}</span></div>
            <div class="goodsList">
              <el-row v-for="(item,index) in hotGodosList" :key="index" class="btgood" type="flex" justify="center">
                <el-col :class="{one:index===0,two:index===1,three:index===2}" class="ranking" :span="4">{{ index+1 }}</el-col>
                <el-col class="name" :span="14">{{ item.skuName }}</el-col>
                <el-col class="count" :span="6">{{ item.count }}单</el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 合作商模块 -->
      <el-row class="xiaoshou-title bottom-shangye" type="flex" justify="space-between">
        <el-card>
          <el-col class="left-goodsMy">
            <el-row type="flex" justify="space-around" align="center">
              <el-col type="flex" justify="space-around">
                <div>
                  <span class="left">合作商点位数Top5</span>
                </div>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end" align="center">
                  <el-col>
                    <span class="el-icon-more-outline" @click="$router.push('/node/partner')" />
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <!-- 图表 -->
              <el-col>
                <div id="shangjia-xiaoshou" class="qushi biao-size" /></el-col>
              <el-col>
                <div class="collect">
                  <div class="count">{{ scale }}</div>
                  <div class="goods-name">点位数</div>
                  <div class="count">{{ busNum }}</div>
                  <div class="goods-name">合作商家</div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col class="right-goodsMy">
            <div class="yicangshebei">
              <el-row type="flex" justify="space-around" align="center">
                <el-col type="flex" justify="space-around">
                  <div>
                    <span class="left">异常设备监控</span>
                  </div>
                </el-col>
                <el-col :span="4">
                  <el-row type="flex" justify="end" align="center">
                    <el-col>
                      <span class="el-icon-more-outline" @click="$router.push('/node/partner')" />
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-row type="flex" justify="center" align="center">
                <el-col class="guzhang-cls">
                  <img src="@/assets/indexhome/guzhang.png" alt="">
                  <p>暂无数据</p>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-card>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getSale,
  getSaleGoods,
  getSalesInfo,
  getPartnersCount,
  getPartnersPT,
  getWorkloadCount,
  getOrdersTotal,
  getTimeFrame
}
from '@/api'
import { dayjs } from '@/utils/dayjs.js'
import * as echarts from 'echarts'
export default {
  name: 'Dashboard',
  data() {
    return {
      dateStart: dayjs(this.chooseMonth).startOf('month').format('YYYY-MM-DD'),
      start: dayjs(dayjs().format('YYYY-MM-DD')).subtract(dayjs().day(), 'day').format('YYYY-MM-DD'),
      end: dayjs(new Date()).format('YYYY-MM-DD'),
      useStart: dayjs(this.chooseMonth).startOf('month').format('YYYY-MM-DD hh:mm:ss'),
      useEnd: dayjs(new Date()).format('YYYY-MM-DD hh:mm:ss'),
      collectType: 1,
      isActBtn: 0,
      hotGodosList: [],
      // 商家数量
      busNum: '',
      // 点位数
      scale: '',
      // 总工作单量
      SumWork: {
        total: 0,
        completedTotal: 0,
        progressTotal: 0,
        cancelTotal: 0
      },
      // 订单总数
      sum: 0,
      // 一段时间得总收入
      revenue: 0
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'userInfo'
    ])
  },
  created() {
    this.getSale()
    this.getSaleGoods()
    this.getSalesInfo()
    this.getPartnersCount()
    this.getPartnersPT()
    this.getWorkloadCount()
    this.getOrdersTotal()
    this.getTimeFrame()
  },
  methods: {
    // 获取工单总量统计
    async getWorkloadCount() {
      const { data } = await getWorkloadCount(this.useStart, this.useEnd)
      data.forEach(item => {
        this.SumWork.total = this.SumWork.total + item.total
        this.SumWork.completedTotal = this.SumWork.completedTotal + item.completedTotal
        this.SumWork.progressTotal = this.SumWork.progressTotal + item.progressTotal
        this.SumWork.cancelTotal = this.SumWork.cancelTotal + item.cancelTotal
      })
    },

    // 获取销售额统计
    async getSalesInfo() {
      const { data } = await getSalesInfo(this.collectType, this.start, this.end)
      const chartDom = document.getElementById('qushi-xiaoshou')
      const myChart = echarts.init(chartDom)
      const option = {
        title:
    {
      show: true, // 显示策略，默认值true,可选为：true（显示） | false（隐藏）
      text: '销售额趋势图', // 主标题文本，'\n'指定换行
      link: '', // 主标题文本超链接,默认值true
      target: null, // 指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
      sublink: '', // 副标题文本超链接
      subtarget: null, // 指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
      x: 'center', // 水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
      y: 'top', // 垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
      textAlign: null, // 水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
      backgroundColor: 'rgba(0,0,0,0)', // 标题背景颜色，默认'rgba(0,0,0,0)'透明
      borderColor: '#ccc', // 标题边框颜色,默认'#ccc'
      borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
      padding: 5, // 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
      itemGap: 10, // 主副标题纵向间隔，单位px，默认为10
      textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
        fontSize: 14,
        fontWeight: 600,
        fontStyle: 'normal'
      }

    },
        grid: {
          top: '15%',
          left: '10%',
          right: '10%',
          bottom: '15%'
        },
        xAxis: {
          type: 'category',
          data: data.xAxis
        },
        yAxis: {
          name: '单位/元',
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }
                ],
                global: false
              }
            }
          }
        },
        series: [
          {
            data: data.series.map(item => item / 100),
            type: 'line',
            smooth: true,
            lineStyle: { // 设置线条的style等
              normal: {
                color: 'red' // 折线线条颜色:红色
              }
            },
            itemStyle: {
              // 设置线条上点的颜色（和图例的颜色）
              normal: {
                color: 'red'
              }
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [ // 渐变颜色
                  {
                    offset: 0,
                    color: '#fe9999'
                  },
                  {
                    offset: 1,
                    color: '#fff'
                  }
                ],
                global: false
              }
            },
            emphasis: {
              areaColor: '#FFF',
              shadowColor: '#215380',
              shadowOffsetY: 5 // 关键在这
            },
            select: {
              areaColor: '#FFF',
              shadowColor: '#215380',
              shadowOffsetY: 5
            }

          }
        ]
      }
      option && myChart.setOption(option)
    },

    // 获取销售额分布
    async getSale() {
      const { data } = await getSale(this.start, this.end)
      const chartDom = document.getElementById('fenbu-xiaoshou')
      const myChart = echarts.init(chartDom)
      const option = {
        title:
    {
      show: true, // 显示策略，默认值true,可选为：true（显示） | false（隐藏）
      text: '销售额分布', // 主标题文本，'\n'指定换行
      link: '', // 主标题文本超链接,默认值true
      target: null, // 指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
      sublink: '', // 副标题文本超链接
      subtarget: null, // 指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
      x: 'center', // 水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
      y: 'top', // 垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
      textAlign: null, // 水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
      backgroundColor: 'rgba(0,0,0,0)', // 标题背景颜色，默认'rgba(0,0,0,0)'透明
      borderColor: '#ccc', // 标题边框颜色,默认'#ccc'
      borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
      padding: 5, // 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
      itemGap: 10, // 主副标题纵向间隔，单位px，默认为10
      textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
        fontSize: 14,
        fontWeight: 600,
        fontStyle: 'normal'
      }

    },
        grid: {
          top: '15%',
          left: '10%',
          right: '10%',
          bottom: '15%'
        },
        xAxis: {
          type: 'category',
          data: data.xAxis
        },
        yAxis: {
          name: '单位/元',
          type: 'value'
        },
        tooltip: {
          trigger: 'axis'
        },
        series: [
          {
            data: data.series.map(item => item / 100),
            type: 'bar',
            smooth: true,
            barWidth: '6%',
            itemStyle: {
              // 设置线条上点的颜色（和图例的颜色）
              normal: {
                color: '#91b0ff'
              }
            },
            emphasis: {
              areaColor: '#FFF',
              shadowColor: '#215380',
              shadowOffsetY: 5 // 关键在这
            },
            select: {
              areaColor: '#FFF',
              shadowColor: '#215380',
              shadowOffsetY: 5
            }
          }
        ]
      }
      option && myChart.setOption(option)
    },

    // 获取销售前几的商品
    async getSaleGoods() {
      const { data } = await getSaleGoods(10, this.start, this.end)
      this.hotGodosList = data
    },

    // 获取合作商家数
    async getPartnersCount() {
      const { data } = await getPartnersCount()
      this.busNum = data
    },

    // 获取合作商家点数
    async getPartnersPT() {
      const { data } = await getPartnersPT()
      this.scale = data.reduce((sum, item) => {
        return sum + item.value
      }, 0)
      const chartDom = document.getElementById('shangjia-xiaoshou')
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '数量',
            type: 'pie',
            radius: '50%',
            // 百分比
            label: {
              normal: {
                show: true,
                formatter: '{b}: {c}({d}%)' // 自定义显示格式(b:name, c:value, d:百分比)
              }
            },
            data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
    },

    // 获取一段时间订单宗苏
    async getOrdersTotal() {
      const { data } = await getOrdersTotal(this.useStart, this.useEnd)
      this.sum = data
    },

    // 点击周让时间变成这周一天
    getWeekData() {
      this.start = dayjs(dayjs().format('YYYY-MM-DD')).subtract(dayjs().day(), 'day').format('YYYY-MM-DD')
      this.collectType = 1
      this.isActBtn = 0
      // 调用函数
      this.getSale()
      this.getSalesInfo()
    },

    // 点击月让时间变成这月一天
    getMonData() {
      this.start = dayjs(this.chooseMonth).startOf('month').format('YYYY-MM-DD')
      this.collectType = 1
      this.isActBtn = 1
      // 调用函数
      this.getSale()
      this.getSalesInfo()
    },

    // 点击月让时间变成这月一天
    getYearsData() {
      const date = new Date()
      const year1 = date.getFullYear()
      const firstMonth = year1 + '-' + '01' + '-' + '01'
      this.collectType = 2
      this.start = firstMonth
      this.isActBtn = 2
      // 调用函数
      this.getSale()
      this.getSalesInfo()
    },

    // 获取一段时间内的总收入
    async getTimeFrame() {
      const { data } = await getTimeFrame(this.useStart, this.useEnd)
      this.revenue = (data / 1000000).toFixed(2)
    }
  }
}
</script>

<style lang="scss" scoped>
.guzhang-cls{
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.count {
    height: 33px;
    font-size: 24px;
    font-weight: 600;
    color: #072074;
    line-height: 33px;
}
.goods-name{
    margin-bottom: 20px;
    height: 17px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #000412;
    line-height: 17px;
}
.left-goodsMy{
  width: 991px;
}
.right-goodsMy{
  width: 662px;
}
.yicangshebei{
  width: 702px;
  height: 353px;
}
.collect{
      width: 154px;
    height: 230px;
    padding-top: 47px;
    padding-left: 38px;
    background: linear-gradient(135deg,transparent,#f8f8f9 0) 0 0,linear-gradient(-135deg,transparent 12px,#f8f8f9 0) 100% 0,linear-gradient(-45deg,transparent,#f8f8f9 0) 100% 100%,linear-gradient(45deg,transparent 12px,#f8f8f9 0) 0 100%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}
.active{
    color: #409EFF;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}
.el-card__body{
  padding: 5px!important;
  width: 413px!important;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.bottom-shangye{
  width: 1753px;
  padding: unset !important;;
}
.xiaoshou-title{
  margin-top: 35px;
  padding-left: 35px;
  font-size: 16px;
   .left{
    display: inline-block;
    font-weight:600
   }
   .right{
    display: inline-block;
    font-size: 12px;
    color:#999;
    margin-left: 10px!important;
   }
}
.biao-size{
  padding-left: 35px;
  width: 620px;
  height: 278px;
}
// .fenbu{
//   padding-left: 55px;
// }
.bgd-le{
  margin-left: 20px;
 .right-tj{
  height: 590px;
  .title{
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
    font-weight:600
  }
  .time{
    margin-left: 10px;
    font-size: 12px;
    font-weight: 400;
    color: #999;
  }
  .goodsList{
    height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .btgood{
    .ranking{
    font-size: 14px;
     width: 21px;
     height: 20px;
     line-height: 20px;
     text-align: center;
     margin-right: 10px;
     color: #8e5900;
     background-image: url('~@/assets/indexhome/forue.png');
    }
    .one{
 background-image: url('~@/assets/indexhome/one.png');
    }.two{
 background-image: url('~@/assets/indexhome/two.png');
    }.three{
 background-image: url('~@/assets/indexhome/three.png');
    }
    .name{
      height: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    }
    .count{
    height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #737589;
    line-height: 20px;
    text-align: right;
    }
}
  }
}

}
.gg-tj{
  height: 166px;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  .top{
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
   .left{
      font-weight:600
   }
   .right{
    font-size: 12px;
    color:#999;
    margin-left: 10px!important;
   }
  }
  .bottom{
   width: 614px;
   height:  108px;
   .ds{
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     .sum{
      font-size: 36px;
      color: #072074;
      font-weight: 600;
      text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
     }
     .gdsum{
      color: #ff5757;
      text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
     }
     .tit{
      color: #91a7dc;
     height: 17px;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 400;
    color: #91a7dc;
    line-height: 17px;
     }
     .gdtit{
          color: #de9690;
     }
     }
   }
}
.gongdan{
     background: #e9f3ff;
    background-image: url('~@/assets/gongdan.png'),url('~@/assets/统计.png');
    background-repeat: no-repeat,no-repeat;
    background-position: 0 0,calc(100% - 12px) 100%;

}
.xiaoshou{
  background: #fbefe8 url('~@/assets/xiaoshou.png') no-repeat calc(100% - 12px) 100%;
  .bottom{
    width: 380px;
  }
}
</style>
